<template>
    <view class="container">
        <!-- 搜索框 -->
		<SearchBar></SearchBar>

        <!-- 分类主体内容 -->
        <view class="main">
            <!-- 左侧 -->
            <view class="left-box">
                <view 
                :class="['theme-item',activeIndex == index? 'active':'']"
                v-for="(item,index) in themeList" 
                :key="index"
                @click="handleClick(index)"
                >{{item}}</view>
            </view>
            <!-- 右侧 -->
            <!-- 使用小程序自己的scroll-view容器，可通过该容器修改滚动位置 -->
            <scroll-view class="right-box" scroll-y :scrollTop="scrollTop">
                <view class="category-box" v-for="(item,index) in categoryChildrenList" :key="index">
                    <view class="category-title">
                        <text>/</text>
                        <text>{{item.cat_name}}</text>
                        <text>/</text>
                    </view>
                    <view class="category">
                        <navigator 
                        class="category-item" 
                        v-for="(it,num) in item.children" 
                        :key="num"
                        :url="'/pages/goods_list/index?id='+it.cat_id"
                        >
                            <image :src="it.cat_icon" mode="widthFix"></image>
                            <text>{{it.cat_name}}</text>
                        </navigator>
                    </view>
                </view>
            </scroll-view>
        </view>
    </view>
</template>

<script>
import SearchBar from '@/components/SearchBar'
// 当前页面中 全局变量  接口的数据
let categoryList = [];
export default {
    data(){
        // data中的数据 有两个作用
		// 1 页面渲染要使用
		// 2 全局变量  
        return{
            activeIndex:0,
            scrollTop:0,
            themeList:[],
            categoryChildrenList:[]
        }
    },
    components:{
        SearchBar 
	},
    methods:{
        loadCategory(){
            this.request({
              url: '/categories',
            }).then(res => {
                categoryList = res;
                // 把需要处理的数据存储到本地缓存中
                uni.setStorageSync('category', {'time':Date.now(),'list':categoryList});
                this.themeList = categoryList.map(item => item.cat_name);
                this.categoryChildrenList = categoryList[0].children;
            })
        },
        handleClick(index){
            this.activeIndex = index;
            this.categoryChildrenList = categoryList[index].children;
            // 问题：
            // 设置右侧scroll-view的 滚动距离为 0
            // 变化前和变化后都为0
            // 所以不起作用
            // 1 原生的小程序不起作用
            // 2 是uni-app的内置的虚拟dom 发现两个值都一样 都没有重新设置回去

            // 这里设置随机数让框架每一次都去设置
            this.scrollTop = Math.random() / 1000;
        }
    },
    onLoad(){
        // 判断本地缓存中是否有数据
        let obj = uni.getStorageSync('category') || null;
        if(obj){
            // 有的话判断是否过期（一分钟）
            if(Date.now() - obj.time > 60*1000){
                this.loadCategory();
            }else{
                this.themeList = obj.list.map(item => item.cat_name);
                this.categoryChildrenList = obj.list[0].children;
            } 
        }else{
            this.loadCategory();
        }
    }
}
</script>

<style lang="scss">
.container{
    height:100vh;
    display: flex;
    flex-direction: column;
    .main{
        flex:1;
        display: flex;
        // 这里隐藏，子盒子滚动效果就会显示
        overflow: hidden;
        .left-box{
            width:200rpx;
            overflow: auto;
            background-image: #F3F3F3;
            .theme-item{
                text-align: center;
                height:60rpx;
                line-height: 60rpx;
                margin:20rpx 0; 
            }
        }
        .right-box{
            flex:1;
            overflow: auto;
            .category-box{
                .category-title{
                    text-align: center;
                    padding:20rpx 0;
                    text{
                      &:nth-child(2n){
                          color: #000;
                          padding:0 10rpx;
                      }
                    }
                }
                .category{
                    display: flex;
                    flex-wrap: wrap;
                    justify-content: flex-start;
                    padding:0 16rpx;
                    .category-item{
                        display: flex;
                        flex-direction: column;
                        align-items: center;
                        width: 33%;
                        margin:10rpx 0;
                        image{
                            // 添加高度后，刷新时重新请求不再有图片适应问题
                            //width:60%;
                            width: 110rpx;
                            height: 110rpx;
                            background-color: #ccc;
                        }
                    }
                }
            }
        }
    }
}
.active{
    color:$theme-color;
    border-left: 3px solid $theme-color;
}
</style>